import { Button, Table } from "antd";
import { useNiceModal } from "./NiceModal"
import { EditOutlined } from "@ant-design/icons";
import { useMemo, useState } from "react";
import _ from "lodash";
import data from "../Demo10/data";

export default ()=>{
  const {show:showModal} = useNiceModal("user-info-modal");
  const [users,setUsers] = useState(data.slice(0,5));
  
  const columns = useMemo(()=>{
    return ([
      {
        title:"Name",
        dataIndex:"name"
      },
      {
        title:"JOb Title",
        dataIndex:"job"
      },
      {
        title:"Actions",
        render(value,user){
          return (
            <Button
              type="link"
              icon={<EditOutlined />}
              onClick={()=> {
                showModal({user}).then((newUser) => {
                  setUsers((users)=>{
                    const byId = _.keyBy(users,"id");
                    byId[newUser.id] = newUser;
                    
                    return _.values(byId)
                  })
                })
              }}
              ></Button>
          )
        }
      }
    ])
  },[showModal])

  return(
    <Table
      size="small"
      pagination={false}
      columns={columns}
      dataSource={users}
      ></Table>
  )
}